<template>
	<view class="my_settle__container">
		 <label class="radio">
		    <radio color="#C00000" :checked="isFullCheck" @click="changeAllRadioState"/><text>全选</text>
		  </label>
		  <view class="amount_box">
		    合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
		  </view>
		  <view class="btnSettle" @click="settleHandler">结算({{checkedCount}})</view>
	</view>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
import { showMsg } from '../../static/common'
import { cartApi } from '../../static/api'
	export default {
		name:"my-settle",
		data() {
			return {
				seconds: 3,
				timer: null,
			};
		},
		
		computed: {
			...mapGetters('my_cart', ['checkedCount', 'total', 'checkedGoodsAmount', 'checkedCount']),
			...mapGetters('my_user', ['addressDataStr']),
			...mapState('my_cart', ['cart']),
			...mapState('my_user', ['token']),
			isFullCheck() {
				return this.total === this.checkedCount;
			},
		},
		
		methods: {
			...mapMutations('my_cart', ['updateAllGoodsState']),
			...mapMutations('my_user', ['updateRedirectInfo']),
			changeAllRadioState() {
				// !this.isFullCheck 当前全选按钮的状态取反之后，就是最新的勾选状态
				this.updateAllGoodsState(!this.isFullCheck);
			},
			
			settleHandler() {
				if(!this.checkedCount) return showMsg.showErrMsg('请选择要结算的商品！');
				if(!this.addressDataStr) return showMsg.showErrMsg('请选择收货地址！');
				if(!this.token) return this.delayNavigate();
				//微信支付
				this.payOrder();
			},
			
			delayNavigate() {
				this.seconds = 3;
				showMsg.showJumpTips(this.seconds);
				this.timer = setInterval(() => {
					this.seconds --;
					if(this.seconds <= 0) {
						clearInterval(this.timer);
						uni.switchTab({
							url: '/pages/user/user',
							success: () => {
								this.updateRedirectInfo({
									openType: 'switchTab',
									from: '/pagescart/cart',
								});
							}
						});
						return;
					}
					showMsg.showJumpTips(this.seconds);
				}, 1000);
			},
			
			async payOrder() {
				const orderInfo = {
					order_price: 0.01,
					consignee_addr: this.addressDataStr,
					goods: this.cart.filter((x) => x.goods_state).map((x) => ({ 
						goods_id: x.goods_id, 
						goods_number: x.goods_count, 
						goods_price: x.goods_price ,
					})),
				};
				console.log('orderInfo', orderInfo);
				const { data } = await cartApi.create(orderInfo);
				console.log('data', data);
			},
		},
	}
</script>

<style lang="scss">
.my_settle__container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.radio {
		display: flex;
		align-items: center;
	}
	.amount_box {
		.amount {
			color: #c00000;
		}
	}
	.btnSettle {
		height: 50px;
		min-width: 100px;
		background-color: #c00000;
		color: white;
		line-height: 100rpx;
		text-align: center;
		padding: 0 10px;
	}
}
</style>